﻿@using ADShop.Models
@{
    Product products = ViewBag.DetailsProduct;
    List<ImagesProduct> listimagesproduct = ViewBag.DetailsProductImages;
}
<div id="fb-root"></div>
<script>
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=834813966545577&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function AddToCart(id) {
    $.post("/ShoppingCart/AddToCart", { "id": id },
        function (data) {
            if (data.Code == 0) {
                alert("Thêm sản phẩm vào giỏ hàng thành công !");
            }
            else if (data.Code == 1) {
                alert("Thêm sản phẩm vào giỏ hàng thất bại !");
            }
        }
    )
}
</script>
<div id="content">
    <!--Breadcrumb Part Start-->
    <div class="breadcrumb"> <a href="index.html">Home</a> » <a href="#">Details</a></div>
    <!--Breadcrumb Part End-->
    <div class="product-info">
        
        <div class="left">
            <div class="image">
                <div id="wrap" style="top:0px;z-index:1000;position:relative;">
                    <a href="@listimagesproduct[0].LinkImagesProduct" title="iPhone" class="cloud-zoom colorbox cboxElement" id="zoom1" rel="adjustX: 0, adjustY:0, tint:'#000000',tintOpacity:0.2, zoomWidth:360, position:'inside', showTitle:false" style="position: relative; display: block;">
                        <img src="@listimagesproduct[0].LinkImagesProduct" width="350" height="350" title="#" alt="#" id="image" style="display: block;"><span id="zoom-image"><i class="zoom_bttn"></i> Zoom</span>
                        <div style="position: absolute; left: 0px; top: 0px; width: 350px; height: 350px; opacity: 0.2; display: none; background-color: rgb(0, 0, 0);"></div>
                        <div style="position: absolute; left: 0px; top: 0px; width: 350px; height: 350px; opacity: 0.2; display: none; background-color: rgb(0, 0, 0);"></div>
                    </a>
                    <div class="mousetrap" style="background-image:url(&quot;.&quot;);z-index:999;position:absolute;width:350px;height:350px;left:0px;top:0px;"></div>
                </div>
            </div>
            <div class="image-additional">
                    @foreach (ImagesProduct ip in listimagesproduct)
                    {
                        <a href="@ip.LinkImagesProduct" title="#" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '@ip.LinkImagesProduct' ">
                            <img src="@ip.LinkImagesProduct"  height="64" title="#" alt="#">
                        </a>
                    }
            </div>
        </div>

        <div class="right">
            <h1>@products.NameProduct</h1>
            <div class="description">
                <span>Brand:</span> <a href="#">@products.Brand.BrandName</a> - <span>Trial:</span> <a href="#">@products.TrialDay Days</a><br>
                <span>Product Code:</span> @products.IDProduct<br>
                <span>Availability: @products.StatusProduct.NameStatus</span> 
            </div>
            <div class="price">
                Price: <span class="price-old">$ @products.PriceProduct.ToString("0,00.##")</span>
                <div class="price-tag">$ @products.ListedPrice.ToString("0,00.##")</div>
                <br>
                <span class="price-tax">Ex Tax: $101.00</span><br>
            </div>
            <div class="cart">
                <div>
                    @*<div class="qty">
                        <strong>Qty:</strong> <a href="javascript:void(0);" class="qtyBtn mines">-</a>
                        <input type="text" value="1" size="2" name="quantity" class="w30" id="qty">
                        <a href="javascript:void(0);" class="qtyBtn plus">+</a>
                        <div class="clear"></div>
                    </div>*@
                    <input type="button" onclick="return AddToCart(@products.IDProduct);" class="button" id="button-cart" value="Add to Cart">
                </div>
                <div><span>&nbsp;&nbsp;&nbsp;- OR -&nbsp;&nbsp;&nbsp;</span></div>
                <div>
                    <a href="#" class="wishlist">Add to Wish List</a><br>
                    <a href="#" class="wishlist">Add to Compare</a>
                </div>
            </div>
            <div class="review">
                <div>@Html.Action("GetRating", "ProductManager", new { id = @products.IDProduct })&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');">0 reviews</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');">Write a review</a></div>
            </div>
            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like at300b" fb:like:layout="button_count"><div class="fb-like" data-ref=".U6A9NGhjpbU.like" data-layout="button_count" data-show_faces="false" data-action="like" data-width="90" data-font="arial" data-href="file:///F:/Mediafire/MediaFire/Theme/Theme/bigshop/themeforest-4063041-bigshop-multipurpose-responsive-html-template/bigshop_html_template/HTML%20version/product.html" data-send="false"></div></a> <a class="addthis_button_tweet at300b"><a href="http://twitter.com/share" class="twitter-share-button" data-url="file:///F:/Mediafire/MediaFire/Theme/Theme/bigshop/themeforest-4063041-bigshop-multipurpose-responsive-html-template/bigshop_html_template/HTML%20version/product.html/#.U6A9NCYEHM0.twitter" data-counturl="file:///F:/Mediafire/MediaFire/Theme/Theme/bigshop/themeforest-4063041-bigshop-multipurpose-responsive-html-template/bigshop_html_template/HTML%20version/product.html" data-count="horizontal" data-text="Product- Bigshop HTML Template:" data-related="" data-hashtags="" data-width="110">Tweet</a></a> <a class="addthis_button_pinterest_pinit at300b"><span class="at_PinItButton"></span></a> <a class="addthis_counter addthis_pill_style"></a> <div class="atclear"></div></div>
            <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506f325f57fbfc95"></script><div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"><iframe id="_atssh955" title="AddThis utility frame" src="//ct1.addthis.com/static/r07/sh162.html#iit=1403010378469&amp;tmr=load%3D1403010355949%26core%3D1403010356657%26main%3D1403010378428%26ifr%3D1403010378504&amp;cb=0&amp;cdn=1&amp;chr=UTF-8&amp;kw=&amp;ab=-&amp;dh=&amp;dr=&amp;du=file%3A%2F%2F%2FF%3A%2FMediafire%2FMediaFire%2FTheme%2FTheme%2Fbigshop%2Fthemeforest-4063041-bigshop-multipurpose-responsive-html-template%2Fbigshop_html_template%2FHTML%2520version%2Fproduct.html&amp;dt=Product-%20Bigshop%20HTML%20Template&amp;dbg=0&amp;md=0&amp;cap=tc%3D0%26ab%3D0&amp;inst=1&amp;vcl=0&amp;jsl=8193&amp;prod=undefined&amp;lng=en-US&amp;ogt=&amp;pc=men&amp;pub=xa-506f325f57fbfc95&amp;ssl=0&amp;sid=53a03d341aa0fe1b&amp;srpl=1&amp;srcs=1&amp;srd=1&amp;srf=1&amp;srx=1&amp;ver=300&amp;xck=0&amp;xtr=0&amp;og=&amp;aa=0&amp;csi=undefined&amp;rev=1401990517&amp;ct=1&amp;xld=1&amp;xd=1" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0px; left: 0px; top: 0px;"></iframe></div>
            <script type="text/javascript" src="http://ct1.addthis.com/static/r07/core139.js"></script>
            <!-- AddThis Button END -->
        </div>
    </div>
    <!-- Tabs Start -->
    <div id="tabs" class="htabs"> <a href="#tab-description" class="selected" style="display: inline;">Description</a> <a href="#tab-review" class="" style="display: inline;">Reviews</a> </div>
    <div id="tab-description" class="tab-content" style="display: block;">
       @products.Description
    </div>
    <div class="tab-content" id="tab-review" style="display: none;">
        <div class="fb-comments" data-href="~/DetailsProduct/Details/@products.IDProduct" data-numposts="5" data-colorscheme="light"></div>
        @*<div class="review-list">
            <div class="author"><b>Harnish</b> on  13/02/2013</div>
            <div class="rating"><img alt="1 reviews" src="image/stars-3.png"></div>
            <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
        </div>
        <h2 id="review-title">Write a review</h2>
        <br>
        <b>Your Name:</b><br>
        <input type="text" value="" name="name">
        <br>
        <br>
        <b>Your Review:</b>
        <textarea style="width: 98%;" rows="8" cols="40" name="text"></textarea>
        <span style="font-size: 11px;"><span style="color: #FF0000;">Note:</span> HTML is not translated!</span><br>
        <br>
        <b>Rating:</b>&nbsp;
        <input type="radio" value="1" name="rating">
        &nbsp;
        <input type="radio" value="2" name="rating">
        &nbsp;
        <input type="radio" value="3" name="rating">
        &nbsp;
        <input type="radio" value="4" name="rating">
        &nbsp;
        <input type="radio" value="5" name="rating">
        <br>
        <br>
        <div class="buttons">
            <div class="right"><a class="button" id="button-review">Continue</a></div>
        </div>*@
    </div>
    <!-- Tabs End -->
    <!-- Related Products Start -->
    @Html.Partial("Partial/_PartialListProductRelated")
    <!-- Related Products End -->
</div>